<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar  
      @input="input" 
      :radius="100" 
       clearButton="auto" 
       cancelButton="none"
       :focus='true'
      ></uni-search-bar>
      
    </view>
    
    <!-- 建议列表 -->
    <view class="suggestion-list" v-if="suggestionList.length!==0">
      <view class="suggestion-item" v-for="(item,index) in suggestionList" :key="index" @click="gotoDetail(item)">
        <text class="suggestion-goods_name">{{item.goods_name}}</text>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
 
  <!-- 搜索历史 -->
  <view class="search-history-box" v-else>    
    <view class="search-history-title">
      <text>搜索历史</text>
      <uni-icons type="trash" size="17" @click="clearHistory"></uni-icons>
    </view>
    <view  class="search-history-list">
     	<uni-tag 
      :text="item" 
      custom-style="background-color: #fff; color:black; border-color: #fff;"
      v-for="(item,index) in searchHistroyList" :key="index"
      @click="gotoGoodsList(item)"
      >
      </uni-tag>
    </view>
    
  </view>
  
 </view>
</template>

<script>
  export default {
    data() {
      return {
        timer:null,
        inputValue:'',
        suggestionList:[],
        searchHistroyList:[]
      };
    },
    methods:{
      
      input(value){
        //1,清除定时器,重新计时
        clearTimeout(this.timer)
        //开启定时器
        this.timer=setTimeout(()=>{
          this.inputValue=value
          this.getSuggestion()
        },500)
        
      },
      async getSuggestion(){
        //判断inputvalue是否为空
        if(this.inputValue===''){
          this.suggestionList=[]
          return
        }
        //发送请求
        const {data:res} =await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.inputValue})
        // console.log(res.message)
        this.suggestionList=res.message
      },
      gotoDetail(item){
        //1,跳转之前保存历史
        const searchHistoryFilter=this.searchHistroyList.filter(item=>item!==this.inputValue)
        this.searchHistroyList=[this.inputValue,...searchHistoryFilter]
        uni.setStorageSync("guangtou-shop-search-history",JSON.stringify(this.searchHistroyList))
        
        //2,跳转
        uni.navigateTo({
          url:'/subpck/goods_detail/goods_detail?' +item.goods_id
        })
      },
      clearHistory(){
        this.searchHistroyList=[]
        uni.setStorageSync("guangtou-shop-search-history","[]")
      },
      gotoGoodsList(kw){
        uni.navigateTo({
          url:`/subpck/goods_list/goods_list?query=${kw}`
        })
      }
    },
    onLoad(){
      this.searchHistroyList=JSON.parse(uni.getStorageSync("guangtou-shop-search-history"))||[]
    }
 
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
    .uni-searchbar {
     background-color: #c00000;
   }
  }
  .suggestion-list {
    padding: 0 5px;
    .suggestion-item {
      font-size: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      align-items: center;  //不知道line-height的侧轴对齐
      .suggestion-goods_name {
        white-space: nowrap;  //不换行
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis;   //溢出文本-省略号
        margin-right: 3px;
      }
    }
  }
  
  .search-history-box {
    padding: 0 5px;
    .search-history-title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
    }
    .search-history-list {
      display: flex;
      flex-wrap: wrap;
      .uni-tag {
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
 
   
</style>
